﻿@{
    Layout = "";

    Html.AddCssFileParts("~/Plugins/Feed.Froogle/Content/styles.css");
}
@model FeedFroogleModel
@using Nop.Core.Infrastructure
@using Nop.Plugin.Feed.Froogle.Models;
@using Nop.Web.Framework;
@using Nop.Web.Framework.UI;
@using (Html.BeginForm())
{
    <div id="googlebase-configure">
        <ul>
            <li @Html.RenderSelectedTabIndex(0, GetSelectedTabIndex())>
                @T("Plugins.Feed.Froogle.General")
            </li>
            <li @Html.RenderSelectedTabIndex(1, GetSelectedTabIndex())>
                @T("Plugins.Feed.Froogle.Override")
            </li>
        </ul>
        <div>
            @TabGeneral()
        </div>
        <div>
            @TabOverride()
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $("#googlebase-configure").kendoTabStrip({
                animation: {
                    open: {
                        effects: "fadeIn"
                    }
                },
                select: tabstrip_on_tab_select
            });
        });
    </script>
}
@helper TabGeneral()
{
    <table class="adminContent">
        <tr>
            <td colspan="2">
                <ul>
                    <li>
                        At least two unique product identifiers are required. So each of your product should
                        have manufacturer (brand) and MPN (manufacturer part number) specified
                    </li>
                    <li>Specify default tax values in your Google Merchant Center account settings</li>
                    <li>Specify default shipping values in your Google Merchant Center account settings</li>
                    <li>
                        In order to get more info about required fields look at the following article <a href="http://www.google.com/support/merchants/bin/answer.py?answer=188494" target="_blank">http://www.google.com/support/merchants/bin/answer.py?answer=188494</a>
                    </li>
                </ul>
            </td>
        </tr>
        <tr class="adminSeparator">
            <td colspan="2">
                <hr />
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.ProductPictureSize):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.ProductPictureSize)
                @Html.ValidationMessageFor(model => model.ProductPictureSize)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.StoreId):
            </td>
            <td class="adminData">
                @Html.DropDownListFor(model => model.StoreId, Model.AvailableStores)
                @Html.ValidationMessageFor(model => model.StoreId)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.CurrencyId):
            </td>
            <td class="adminData">
                @Html.DropDownListFor(model => model.CurrencyId, Model.AvailableCurrencies)
                @Html.ValidationMessageFor(model => model.CurrencyId)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.DefaultGoogleCategory):
            </td>
            <td class="adminData">
                @Html.DropDownListFor(model => model.DefaultGoogleCategory, Model.AvailableGoogleCategories)
                @Html.ValidationMessageFor(model => model.DefaultGoogleCategory)
            </td>
        </tr>
        @if (Model.GeneratedFiles.Count > 0)
        {
            <tr>
                <td class="adminTitle">
                    @Html.NopLabelFor(m => m.GeneratedFiles):
                </td>
                <td class="adminData">
                    @for (int i = 0; i <= Model.GeneratedFiles.Count - 1; i++)
                    {
                        var generatedFile = Model.GeneratedFiles[i];
                        @generatedFile.StoreName <text>-</text> <a href="@generatedFile.FileUrl" target="_blank">@generatedFile.FileUrl</a>
                        if (i != Model.GeneratedFiles.Count - 1)
                        {
                            <br />
                        }
                    }
                </td>
            </tr>
        }
        <tr>
            <td colspan="2">
                <input type="submit" name="save" class="k-button" value="@T("Admin.Common.Save")" />
                <input type="submit" name="generate" class="k-button" value="@T("Plugins.Feed.Froogle.Generate")" />
            </td>
        </tr>
        @if (!String.IsNullOrEmpty(Model.GenerateFeedResult))
        {
            <tr class="adminSeparator">
                <td colspan="2">
                    <hr />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <b>@Html.Raw(Model.GenerateFeedResult)</b>
                </td>
            </tr>
        }
    </table>
}
@helper TabOverride()
{
    var defaultGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;
    var gridPageSizes = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSizes;

    <table class="adminContent froogle">
        <tr>
            <td colspan="2">
                You can download the list of allowed Google product category attributes <a href="http://www.google.com/support/merchants/bin/answer.py?answer=160081"
                                                                                           target="_blank">here</a>
            </td>
        </tr>
        <tr class="adminSeparator">
            <td colspan="2">
                <hr />
            </td>
        </tr>
        <tr>
            <td>
                <script id="google-popup-editor" type="text/x-kendo-template">
                    <div class="editor-label"><label for="GoogleCategory">@T("Plugins.Feed.Froogle.Products.GoogleCategory")</label></div>
                    <div class="editor-field"><input name="GoogleCategory" /></div>

                    <div class="editor-label"><label for="Gender">@T("Plugins.Feed.Froogle.Products.Gender")</label></div>
                    <div class="editor-field"><input name="Gender" /></div>

                    <div class="editor-label"><label for="AgeGroup">@T("Plugins.Feed.Froogle.Products.AgeGroup")</label></div>
                    <div class="editor-field"><input name="AgeGroup" /></div>

                    <div class="editor-label"><label for="Color">@T("Plugins.Feed.Froogle.Products.Color")</label></div>
                    <div class="editor-field"><input name="Color" /></div>

                    <div class="editor-label"><label for="GoogleSize">@T("Plugins.Feed.Froogle.Products.Size")</label></div>
                    <div class="editor-field"><input name="GoogleSize" /></div>
                </script>

                <div id="froogleproducts-grid"></div>

                <script>
                    $(document).ready(function() {
                        $("#froogleproducts-grid").kendoGrid({
                            dataSource: {
                                type: "json",
                                transport: {
                                    read: {
                                        url: "@Html.Raw(Url.Action("GoogleProductList", "FeedFroogle", new RouteValueDictionary() { { "Namespaces", "Nop.Plugin.Feed.Froogle.Controllers" }, { "area", "" } }))",
                                        type: "POST",
                                        dataType: "json"
                                    },
                                    update: {
                                        url: "@Html.Raw(Url.Action("GoogleProductUpdate", "FeedFroogle", new RouteValueDictionary() { { "Namespaces", "Nop.Plugin.Feed.Froogle.Controllers" }, { "area", "" } }))",
                                        type: "POST",
                                        dataType: "json"
                                    }
                                },
                                schema: {
                                    data: "Data",
                                    total: "Total",
                                    errors: "Errors",
                                    model: {
                                        id: "Id",
                                        fields: {
                                            ProductId: { editable: false, type: "number" },
                                            ProductName: { editable: false, type: "string" },
                                            GoogleCategory: { editable: true, type: "string" },
                                            Gender: { editable: true, type: "string" },
                                            AgeGroup: { editable: true, type: "string" },
                                            Color: { editable: true, type: "string" },
                                            GoogleSize: { editable: true, type: "string" },
                                            Id: { editable: false, type: "number" }
                                        }
                                    }
                                },
                                requestEnd: function(e) {
                                    if (e.type == "update") {
                                        this.read();
                                    }
                                },
                                error: function(e) {
                                    display_kendoui_grid_error(e);
                                    // Cancel the changes
                                    this.cancelChanges();
                                },
                                pageSize: @(defaultGridPageSize),
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            },
                            pageable: {
                                refresh: true,
                                pageSizes: [@(gridPageSizes)]
                            },
                            editable: {
                                confirmation: false,
                                mode: "popup",
                                template: kendo.template($("#google-popup-editor").html())
                            },
                            scrollable: false,
                            columns: [{
                                field: "ProductName",
                                title: "@T("Plugins.Feed.Froogle.Products.ProductName")",
                                width: 300
                            }, {
                                field: "Id",
                                title: "Data",
                                width: 300,
                                template: '<div class="google-info">' +
                                    '<dl>' +
                                    '<dt>@T("Plugins.Feed.Froogle.Products.GoogleCategory"):</dt><dd># if(GoogleCategory !== null) {# #:GoogleCategory# #}  #</dd>' +
                                    '<dt>@T("Plugins.Feed.Froogle.Products.Gender"):</dt><dd># if(Gender !== null) {# #:Gender# #}  #</dd>' +
                                    '<dt>@T("Plugins.Feed.Froogle.Products.AgeGroup"):</dt><dd># if(AgeGroup !== null) {# #:AgeGroup# #}  #</dd>' +
                                    '<dt>@T("Plugins.Feed.Froogle.Products.Color"):</dt><dd># if(Color !== null) {# #:Color# #}  #</dd>' +
                                    '<dt>@T("Plugins.Feed.Froogle.Products.Size"):</dt><dd># if(GoogleSize !== null) {# #:GoogleSize# #}  #</dd>' +
                                    '</dl>' +
                                    '</div>'
                            }, {
                                command: {name: "edit", text: "@T("Admin.Common.Edit")"},
                                title: "@T("Admin.Common.Edit")",
                                width: 150
                            }
                            ]
                        });
                    });
                </script>
            </td>
        </tr>
    </table>
}